<template>
	<view>
		<navSearchBar title="我的活动单"></navSearchBar>
		<view class="result">
			<view class="">{{score}}</view>
			<view class="">{{appraise}}</view>
		</view>
		<view class="form-box" >
			<view class="tips">希望通过您的建议以便为您提供更优质的服务。</view>
			<view class="form">
				<view v-for="(item,index) in question" :key="item.id">
					<view class="form-item" v-if="item.type.value == 3">
						<view class="label">{{index+1}}.{{item.title}}</view>
						<view class="content my-textarea">
							<textarea v-model="item.result"></textarea>
						</view>
					</view>
					<view class="form-item" v-if="item.type.value == 1">
						<view class="label">{{index+1}}.{{item.title}}</view>
						<view class="content">
							<view class="radio">
								<view class="radio-item"  v-for="(v, i) in item.options" :key="i">
									<view class="radio-checked" :class="['radio-checked',item.result == v.url?'radio-active':'']" @click="scoreChange(item,v.url)"></view>
									<view class="radio-name">{{v.value}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<button class="form-btn" @click="confirm">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				score:"",
				appraise:"",
				question:[],
				name: "",
				currentScore:""
			};
		},
		onLoad() {
			let id = this.$Route.query.id
			this.getQuersionB(id)
		},
		methods:{
			async getQuersionB(id) {
				let res = await this.$api.questionB({client_id:id})
				let data = res.data.data
				const {score,text} = data.score
				this.score = score
				this.appraise = text
				let list = data.list||[];
				
				this.question = list.map((el) => {
					if(el.result){
						el.result = el.result.result
					}
					return el;
				});
				console.log(res.data.data,"client_id")
			},
			scoreChange(item,current) {
				item.result = current
				console.log(item)
			},
			async confirm() {
				let arr = []
				this.question.map(item=>{
					arr.push({
						question_id:item.id,
						result:item.result
					})
				})
				
				let res = this.$api.confrimQuestion(JSON.stringify(arr))
				if(res.data.status == 200) {
					this.$tip.success("提交成功")
				}else {
					this.$tip.toast("提交失败")
				}
				console.log(arr,"arr")
			},
		}
	}
</script>

<style lang="scss" scoped>
	.result {
		color:#FFB547;
		font-size: 48rpx;
		margin: 70rpx 0 14rpx;
		view {
			line-height: 48rpx;
			text-align: center;
			&:nth-child(1) {
				margin-bottom: 40rpx;
			}
		}
	}
	.form-box {
		padding: 70rpx 40rpx 40rpx;
		pointer-events: none;
	}

	.tips {
		height: $text-size;
		font-size: $text-size;
		margin-block-end: 60rpx;
	}

	.form {
		.form-item {
			margin-bottom: 40rpx;
		}

		.label {
			line-height: 42rpx;
			font-size: 28rpx;
			margin-bottom: 30rpx;
		}
	}
	.radio {
		
		.radio-item {
			display: flex;
			align-items: center;
			&:not(:last-child) {
				margin-bottom: 30rpx;
			}
		}
		.radio-checked {
			width: 40rpx;
			height: 40rpx;
			box-sizing: border-box;
			border-radius: 50%;
			background: #FCFCFF;
			margin-right: 20rpx;
			border: 2rpx solid #D5D4D4;
		}
		.radio-checked.radio-active {
			border: 8rpx solid #55C867;
		}
		.radio-name {
			line-height: 28rpx;
			font-size: 28rpx;
		}
	}
</style>